<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <link rel="stylesheet" href="/static/css/clear.css">
    <link rel="stylesheet" href="/static/css/personal.css">
    <script src="/static/js/jquery-1.12.2.js"></script>
    <link rel="icon" href="/static/images/title-lolg.png">
    <title>个人信息</title>

</head>
<body>
<div th:replace="/common/head::#header"></div>
<!-- 页面主体 -->
<div class="main">
    <div class="content">
        <div class="left">
            <ul>
                <li>个人中心</li>
                <li><a href="/movie/order/personalOrder">我的订单</a></li>
                <li class="activeli"><a href="/profile.html">基本信息</a></li>
            </ul>
        </div>
        <div class="ringht">
            <div class="top">
                <p>基本信息</p>
            </div>
            <!--左边图片上传部分-->
            <div style="margin-top: 20px;height: 400px;display: inline-block;">
                <p><img th:src="${session.SPRING_SECURITY_CONTEXT.authentication.principal.users.headImgUrl}"
                        style="width: 200px;height: 200px" id="headImg"></p>
                <p style="margin-top: 10px;margin-left: 30px">
                    <input id="uploadfile" type="file"/>
                </p>
                <p style="font-size:13px;color: burlywood;margin-top: 15px">支持JPG,JPEG,PNG格式,且文件需小于1M</p>
            </div>
            <!--右边信息修改部分-->
            <div style="display: inline-block;height: 400px;width: 500px;position:relative;left: 40px;top: -200px">
                昵称:&nbsp;&nbsp;&nbsp;<input th:value="${session.SPRING_SECURITY_CONTEXT.authentication.principal.users.nickname}" name="nickname"
                style="width: 200px;border: 1px solid wheat;height: 40px;padding-left: 10px;" id="nickname"><br>
                <button id="save" onclick="save()" style="margin-left: 120px;margin-top: 10px">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 页面底部 -->
<div th:replace="common/bottom::#bottom"></div>

<script>
    $(function () {
        $("#uploadfile").change(function () {
            var file = $("#uploadfile").val();
            if (file != null && file != '') {
                var str = $("#uploadfile").val().toString();
                var imgType = str.substr(str.indexOf("."), str.length)
                //获取oss传输签名
                $.ajax({
                    url: "/oss/policy",
                    async: false,
                    data: {
                        imgType: imgType
                    },
                    success: function (data) {
                        //保存数据
                        //获得图片文件
                        var request = new FormData();
                        var file = document.getElementById("uploadfile");
                        var filObj = file.files[0];
                        //上传文件参数
                        request.append("key", data.key)
                        request.append("policy", data.policy)
                        request.append("signature", data.signature)
                        request.append("ossaccessKeyId", data.accessid)
                        request.append("dir", data.dir)
                        request.append("host", data.host)
                        request.append("name", data.name)
                        request.append("success_action_status", 200)
                        request.append("file", filObj);

                        //保存图片
                        $.ajax({
                            url: "https://catdog-movie.oss-cn-beijing.aliyuncs.com",
                            enctype: "multipart/form-data",
                            processData: false,
                            cache: false,
                            async: false,
                            contentType: false,
                            type: 'post',
                            data: request,
                            success: function (request) {
                                    //修改用户图片数据
                                    $.ajax({
                                        url: "/movie/users/editHeadImgUrl",
                                        data:{
                                            headImgUrl:data.url
                                        },
                                        type:"post",
                                        success:function (request1) {
                                            $("#headImg").attr("src", data.url);
                                            $("#masterHeapImg").attr("src", data.url);
                                        }
                                        ,error:function (request2) {
                                            alert("图片上传失败")
                                        }
                                    })


                            }
                        })
                    }
                })

            } else {
                alert('请选择文件！');
            }
        })
    })

    function save() {
        $.ajax({
            url:"/movie/users/editUsers",
            type:"post",
            data:{
                nickname:$("#nickname").val()
            },
            success:function (data) {
                if (data.code==0){
                    alert("修改成功")
                } else {
                    alert(data.msg)
                }
            }
        })
    }
</script>
</body>
</html>